<template>
    <div id="echart" ref="echart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: 335,
                  name: '直接访问'
                },
                {
                  value: 234,
                  name: '联盟广告'
                },
                {
                  value: 1548,
                  name: '搜索引擎'
                }
              ]
            }
          ]
        }
      }
    }
  },
  data () {
    return {
      echart: null
    }
  },
  watch: {
    options: {
      handler: function () {
        // console.log('watch')
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart () {
      if (!this.echart) {
        this.echart = echarts.init(this.$refs.echart)
      }
      this.echart.setOption(this.options)
      // console.log(this.options)
      // console.log('init')
    }
  },
  mounted () {
    // console.log('mounted')
    this.initChart()
    // console.log(this.echart)
  }
}
</script>

<style scoped>
#echart {
    width: 100%;
    height: 240px;
}
</style>
